@import "../../style/public";
.miniAppManage {
  .top {
    background: #fff;
    @include thin-border(false, false, bottom);
    @include remCalc(padding, 60);
    .info {
      display: flex;
      align-items: center;
      .left {
        .logo {
          @include remCalc(width, 120);
          @include remCalc(height, 120);
          background: url(../../../static/images/xhdr.png);
          background-size: contain;
        }
      }
      .right {
        @include remCalc(margin-left, 40);
        .inner-top {
          display: flex;
          .name {
            color: #333;
            @include remCalc(font-size, 32);
          }
          .payType {
            display: flex;
            li {
              @include remCalc(margin-left, 20);
              .zhk-wx {
                color: $color-green;
              }
              .zhk-zfb {
                color: $color-red;
              }
            }
          }
        }
        .status {
          @include remCalc(margin, 10, 0, 0, 0);
          @include remCalc(font-size, 28);
          &.disabled {
            color: #f5364e;
          }
          &.enable {
            color: $color-green;
          }
          &.unopen {
            color: $color-red;
          }
        }
      }
    }
    .desc {
      color: #999;
      @include remCalc(margin, 40, 0, 0, 0);
      @include remCalc(font-size, 28);
    }
  }
  .ope-list {
    background: #fff;
    @include remCalc(margin-top, 20);
    li {
      display: flex;
      color: #333;
      @include remCalc(line-height, 88);
      @include remCalc(padding, 0, 30);
      @include remCalc(font-size, 32);
      @include thin-border(true, false, top);
      //   &:first-child{
      //       &::after{
      //           display: none;
      //       }
      //   }
      span {
      }
      div {
        flex: 1;
        text-align: right;
        i {
          color: #ccc;
        }
      }
    }
  }
  .info-modal-popup {
    z-index: 10000001!important;
    position: fixed !important;
    @include remCalc(width, 560);
    @include remCalc(border-radius, 14);
    @include remCalc(height, 526);
    position: relative;
    overflow: hidden;
    .zhk-alert_close {
      @include remCalc(font-size, 24);
      position: absolute;
      @include remCalc(top, 30);
      @include remCalc(right, 30);
      &::after {
        content: "";
        position: absolute;
        $size: -30;
        @include remCalc(top, $size);
        @include remCalc(bottom, $size);
        @include remCalc(left, $size);
        @include remCalc(right, $size);
      }
    }
    .content {
      text-align: center;
      @include remCalc(padding, 0, 30);
      box-sizing: border-box;
      .logo {
        display: inline-block;
        @include remCalc(margin, 42, 0, 30, 0);
        @include remCalc(width, 180);
        @include remCalc(height, 180);
        background: url(../../../static/images/xhdr.png);
        background-size: contain;
      }
      .title {
        @include remCalc(font-size, 36);
        color: #000;
      }
      .desc {
        @include remCalc(margin, 18, 0, 0, 0);
        @include remCalc(font-size, 30);
        color: #999;
      }
    }
    .ope-link {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      @include remCalc(line-height, 100);
      @include thin-border(false, true, top);
      @include remCalc(font-size, 36);
      color: #459dff;
    }
  }
  .btn-wrap {
    padding: 0;
    .btn {
      border-radius: 0;
      &.disable {
        background: #fff;
        color: #333;
        @include thin-border(false, false, top);
      }
    }
  }
}
.miniAppManageIntro {
  .bgi {
    @include remCalc(width, 750);
    @include remCalc(height, 2037);
    background: url(../../../static/images/miniAppIntro.png) 0 0 no-repeat;
    background-size: cover;
    position: relative;
    .open-btn {
      position: absolute;
      @include remCalc(width, 300);
      @include remCalc(height, 100);
      @include remCalc(left, 10);
      @include remCalc(top, 250);
      background: transparent;
      z-index: 1;
    }
  }
  .btn-wrap {
    padding: 0;
    .btn {
      border-radius: 0;
    }
  }
}
.selectMiniAppType{
  .mini-app-type{
    @include remCalc(padding-left, 30);
    @include remCalc(margin-top, 20);
    background: #fff;
    .item{
      position: relative;
      @extend %box-sizing;
      @include thin-border(false, false, bottom);
      .logo{
        position: absolute;
        @include remCalc(top,24);
        @include remCalc(left, 0);
        @include remCalc(width, 120);
        @include remCalc(height, 120);
      }
      .name{
        @include remCalc(padding-left, 140);
        @include remCalc(padding-top, 42);
        @include remCalc(font-size, 30);
        @include remCalc(line-height, 34);
        color: #333333;
      }
      .info{
        @include remCalc(padding-left, 140);
        @include remCalc(padding-top, 20);
        @include remCalc(padding-bottom, 42);
        @include remCalc(font-size, 24);
        color: #999;
      }
      .right-icon{
        @include remCalc(font-size, 34);
        @include remCalc(line-height, 40);
        color: #ccc;
        position: absolute;
        @include remCalc(top,60);
        @include remCalc(right, 30);
      }
      &:last-child::after{
        display: none;
      }
    }
  }
}
.selfMiniAppManage{
  .self-app-list{
    .item{
      @include remCalc(margin-top, 20);
      @include remCalc(padding-left, 30);
      background: #fff;
      .app-info{
        position: relative;
        @extend %box-sizing;
        @include thin-border(false, false, bottom);
        .logo{
          position: absolute;
          @include remCalc(top,24);
          @include remCalc(left, 0);
          @include remCalc(width, 120);
          @include remCalc(height, 120);
        }
        .name{
          @include remCalc(padding-left, 140);
          @include remCalc(padding-top, 32);
          @include remCalc(font-size, 30);
          @include remCalc(line-height, 34);
          @include remCalc(height, 34);
          color: #333333;
          @extend %text-overflow;
          @include remCalc(width, 352);
          display: inline-block;
        }
        .info{
          @include remCalc(padding-left, 140);
          @include remCalc(padding-top, 20);
          @include remCalc(padding-bottom, 42);
          @include remCalc(font-size, 24);
          color: #999;
        }
        .right-icon{
          @include remCalc(font-size, 34);
          @include remCalc(line-height, 40);
          color: #ccc;
          position: absolute;
          @include remCalc(top,60);
          @include remCalc(right, 20);
        }
        &:last-child::after{
          display: none;
        }
        .options{
          @include remCalc(font-size, 24);
          text-align: center;
          color: $color-red;
          border: 1px solid $color-red;
          @include remCalc(border-radius, 8);
          @include remCalc(line-height, 28);
          @include remCalc(padding, 10,10);
          @include remCalc(width, 124);
          @extend %box-sizing;
          position: absolute;
          @include remCalc(top, 20);
          @include remCalc(right, 30);
          &.disabled{
            color: #999999;
            border-color: #999999;;
          }
        }
      }
      .link-wrap {
        @include remCalc(margin-left, 30);
        @include remCalc(padding,0, 30,0,0);
        @include thin-border(false, false, top);
        li {
          @include remCalc(font-size, 28);
          @include remCalc(height, 90);
          //@include remCalc(line-height, 90);
          //color: #333;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          > div {
            //flex: 1;
            text-align: center;
            border: 1px solid $color-red;
            color: $color-red;
            display: inline-table;
            @include remCalc(margin-left, 20);
            @include remCalc(padding, 8, 20);
            @include remCalc(border-radius, 100);
            &.disabled {
              border: 1px solid #ccc;
              color: #ccc !important;
            }
          }
        }
      }
      .ope-list {
        background: #fff;
        li {
          display: flex;
          color: #333;
          @include remCalc(line-height, 88);
          @include remCalc(padding, 0, 30);
          @include remCalc(font-size, 32);
          //@include thin-border(true, false, top);
          //   &:first-child{
          //       &::after{
          //           display: none;
          //       }
          //   }
          span {
          }
          div {
            flex: 1;
            text-align: right;
            align-items: center;
            display: flex;
            justify-content: flex-end;
            .shop-name{
              @include remCalc(max-width, 400);
              @extend %text-overflow;
              display: inline-block;
            }
            i {
              color: #ccc;
            }
          }
        }
      }
    }
  }
}
.authorize-page{
  width: 100%;
  height: 100%;
}
.tip-info{
  text-align: center;
  color: #999;
  @include remCalc(font-size, 24);
  @include remCalc(padding, 30,30);
}
